<template>
  <div class="membershipCardManagement">
    <h3>会员卡管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入标题" v-model="search1">
          <template slot="prepend">标题</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">新增</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="标题"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="key"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="限多少天"
          width="110"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="限观影次数"
          width="110"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="原价"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="现价"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="类型"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="状态"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="是否展示在app端"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="备注说明"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //新增、修改弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="modifyEditorDialogVisible" width="40%" center>
      <div class="row">
        <span>VIP会员卡标题：</span>
        <el-input placeholder="请输入VIP标题" v-model="inputVIPTitle" clearable></el-input>
      </div>
      <div class="row">
        <span>KEY：</span>
        <el-input v-model="inputKey" placeholder :disabled="true"></el-input>
      </div>
      <div class="row">
        <span>限多少天：</span>
        <el-input placeholder="请输入天数" v-model="inputDayNum" clearable type="number"></el-input>
      </div>
      <div class="row">
        <span>限多少次：</span>
        <el-input placeholder="请输入次数" v-model="inputTimesNum" clearable type="number"></el-input>
      </div>
      <div class="row">
        <span>原价：</span>
        <el-input placeholder="请输入原价" v-model="inputOriginalPrice" clearable></el-input>
      </div>
      <div class="row">
        <span>现价：</span>
        <el-input placeholder="请输入现价" v-model="inputCurrentPrice" clearable></el-input>
      </div>
      <div class="row">
        <span>类型：</span>
        <el-select v-model="inputType" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>描述：</span>
        <el-input placeholder="请输入描述信息" v-model="inputDescription" clearable></el-input>
      </div>
      <div class="row">
        <span>排序权重：</span>
        <el-input placeholder="请输入数字" v-model="inputSort" clearable type="number"></el-input>
      </div>
     <div class="row">
        <span>app是否展示：</span>
        <el-select v-model="inputIsShow" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>状态：</span>
        <el-select v-model="inputStatus" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "membershipCardManagement",
  data() {
    return {
      search1: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      currentPage1:1,
      dialogTitle:"修改vip信息",
      modifyEditorDialogVisible:false,
       options2:[
         {
          value: "选项1",
          label: "服务"
        },
        {
          value: "选项2",
          label: "会员卡"
        },
      ],
      //弹窗会员卡标题
      inputVIPTitle:"",
      //弹窗key
      inputKey:"",
      //弹窗限多少天
      inputDayNum:"",
      //弹窗限多少次
      inputTimesNum:"",
      //弹窗原价
      inputOriginalPrice:"",
      //弹窗现价
      inputCurrentPrice:"",
      //弹窗类型
      inputType:"",
      //弹窗描述信息
      inputDescription:"",
      //弹窗排序权重
      inputSort:"",
      //弹窗app是否展示
      inputIsShow:"",
      //弹窗状态
      inputStatus:"",
    };
  },
  mounted() {},
  methods: {
       // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //新增
    addData(){
        this.modifyEditorDialogVisible=true;
        this.dialogTitle="新建vip信息";
    },
    //编辑
    handleEdit(index,row){
        this.modifyEditorDialogVisible=true;
        this.dialogTitle="修改vip信息";
    },
    //提交修改或者新增
    submitModifyEditor(){},
    //取消提交
    cancelModifyEditor(){
        this.modifyEditorDialogVisible=false;
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
</style>